<template>
  <div class="fraud-case-management">
    <div class="page-header">
      <h2>诈骗案例管理</h2>
      <div class="header-actions">
        <el-button type="primary" @click="showAddDialog">
          <el-icon><Plus /></el-icon>
          添加案例
        </el-button>
        <el-button @click="exportData">
          <el-icon><Download /></el-icon>
          导出数据
        </el-button>
      </div>
    </div>

    <!-- 搜索和筛选 -->
    <div class="search-filters">
      <el-form :model="searchForm" inline>
        <el-form-item label="案例标题">
          <el-input v-model="searchForm.title" placeholder="请输入案例标题" clearable />
        </el-form-item>
        <el-form-item label="诈骗类型">
          <el-select v-model="searchForm.category" placeholder="请选择诈骗类型" clearable>
            <el-option
              v-for="type in fraudTypes"
              :key="type.value"
              :label="type.label"
              :value="type.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select v-model="searchForm.status" placeholder="请选择审核状态" clearable>
            <el-option label="待审核" value="pending" />
            <el-option label="已通过" value="approved" />
            <el-option label="已拒绝" value="rejected" />
          </el-select>
        </el-form-item>
        <el-form-item label="风险等级">
          <el-select v-model="searchForm.riskLevel" placeholder="请选择风险等级" clearable>
            <el-option label="高危" value="high" />
            <el-option label="中危" value="medium" />
            <el-option label="低危" value="low" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-icon">
          <el-icon><Warning /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.total }}</div>
          <div class="stat-label">总案例数</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon pending">
          <el-icon><Clock /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.pending }}</div>
          <div class="stat-label">待审核</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon approved">
          <el-icon><Check /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.approved }}</div>
          <div class="stat-label">已通过</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon high-risk">
          <el-icon><Warning /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.highRisk }}</div>
          <div class="stat-label">高危案例</div>
        </div>
      </div>
    </div>

    <!-- 案例列表 -->
    <div class="case-list">
      <div class="list-header">
        <el-checkbox v-model="selectAll" @change="handleSelectAll">全选</el-checkbox>
        <div class="batch-actions" v-if="selectedCases.length > 0">
          <el-button type="success" size="small" @click="batchApprove">
            批量通过
          </el-button>
          <el-button type="danger" size="small" @click="batchReject">
            批量拒绝
          </el-button>
          <el-button type="danger" size="small" @click="batchDelete">
            批量删除
          </el-button>
        </div>
      </div>

      <el-table
        :data="caseList"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        stripe
        style="width: 100%"
      >
        <el-table-column type="selection" width="50" />
        <el-table-column label="案例标题" min-width="200">
          <template #default="{ row }">
            <div class="case-title">
              <span>{{ row.title }}</span>
              <el-tag v-if="row.isHot" type="danger" size="small">热点</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="诈骗类型" width="120">
          <template #default="{ row }">
            <el-tag :type="getFraudTypeColor(row.category)">
              {{ getFraudTypeLabel(row.category) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="风险等级" width="100">
          <template #default="{ row }">
            <el-tag :type="getRiskLevelColor(row.riskLevel)">
              {{ getRiskLevelLabel(row.riskLevel) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="损失金额" width="120">
          <template #default="{ row }">
            <span class="loss-amount">{{ formatCurrency(row.lossAmount) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusColor(row.status)">
              {{ getStatusLabel(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="提交时间" width="180">
          <template #default="{ row }">
            {{ formatDate(row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="viewCase(row)">
              查看
            </el-button>
            <el-button type="warning" size="small" @click="editCase(row)">
              编辑
            </el-button>
            <el-dropdown @command="handleAction">
              <el-button type="info" size="small">
                更多<el-icon><ArrowDown /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-if="row.status === 'pending'" :command="{action: 'approve', row}">
                    通过审核
                  </el-dropdown-item>
                  <el-dropdown-item v-if="row.status === 'pending'" :command="{action: 'reject', row}">
                    拒绝审核
                  </el-dropdown-item>
                  <el-dropdown-item :command="{action: 'toggleHot', row}">
                    {{ row.isHot ? '取消热点' : '设为热点' }}
                  </el-dropdown-item>
                  <el-dropdown-item :command="{action: 'delete', row}" divided>
                    删除案例
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>

    <!-- 添加/编辑案例对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="isEdit ? '编辑案例' : '添加案例'"
      width="800px"
      :before-close="handleCloseDialog"
    >
      <el-form
        ref="caseFormRef"
        :model="caseForm"
        :rules="caseFormRules"
        label-width="120px"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="案例标题" prop="title">
              <el-input v-model="caseForm.title" placeholder="请输入案例标题" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="诈骗类型" prop="category">
              <el-select v-model="caseForm.category" placeholder="请选择诈骗类型">
                <el-option
                  v-for="type in fraudTypes"
                  :key="type.value"
                  :label="type.label"
                  :value="type.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="风险等级" prop="riskLevel">
              <el-select v-model="caseForm.riskLevel" placeholder="请选择风险等级">
                <el-option label="高危" value="high" />
                <el-option label="中危" value="medium" />
                <el-option label="低危" value="low" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="损失金额" prop="lossAmount">
              <el-input-number
                v-model="caseForm.lossAmount"
                :min="0"
                :step="1000"
                placeholder="请输入损失金额"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="受害者年龄" prop="victimAge">
              <el-input-number
                v-model="caseForm.victimAge"
                :min="1"
                :max="120"
                placeholder="请输入受害者年龄"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="案例描述" prop="description">
              <el-input
                v-model="caseForm.description"
                type="textarea"
                :rows="4"
                placeholder="请输入详细的案例描述"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="诈骗手段" prop="fraudMethod">
              <el-input
                v-model="caseForm.fraudMethod"
                type="textarea"
                :rows="3"
                placeholder="请描述具体的诈骗手段和过程"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="防范措施" prop="prevention">
              <el-input
                v-model="caseForm.prevention"
                type="textarea"
                :rows="3"
                placeholder="请提供相应的防范措施和建议"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="关键词标签" prop="keywords">
              <el-input
                v-model="caseForm.keywords"
                placeholder="请输入关键词，用逗号分隔"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否热点案例">
              <el-switch v-model="caseForm.isHot" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否公开展示">
              <el-switch v-model="caseForm.isPublic" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitCase" :loading="submitting">
            {{ isEdit ? '更新' : '添加' }}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 案例详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="案例详情"
      width="900px"
    >
      <div class="case-detail" v-if="selectedCase">
        <div class="detail-header">
          <h3>{{ selectedCase.title }}</h3>
          <div class="detail-tags">
            <el-tag :type="getFraudTypeColor(selectedCase.category)">
              {{ getFraudTypeLabel(selectedCase.category) }}
            </el-tag>
            <el-tag :type="getRiskLevelColor(selectedCase.riskLevel)">
              {{ getRiskLevelLabel(selectedCase.riskLevel) }}
            </el-tag>
            <el-tag v-if="selectedCase.isHot" type="danger">热点案例</el-tag>
          </div>
        </div>

        <div class="detail-content">
          <div class="detail-section">
            <h4>基本信息</h4>
            <div class="detail-row">
              <span class="label">损失金额：</span>
              <span class="value">{{ formatCurrency(selectedCase.lossAmount) }}</span>
            </div>
            <div class="detail-row">
              <span class="label">受害者年龄：</span>
              <span class="value">{{ selectedCase.victimAge }}岁</span>
            </div>
            <div class="detail-row">
              <span class="label">审核状态：</span>
              <el-tag :type="getStatusColor(selectedCase.status)">
                {{ getStatusLabel(selectedCase.status) }}
              </el-tag>
            </div>
          </div>

          <div class="detail-section">
            <h4>案例描述</h4>
            <p>{{ selectedCase.description }}</p>
          </div>

          <div class="detail-section">
            <h4>诈骗手段</h4>
            <p>{{ selectedCase.fraudMethod }}</p>
          </div>

          <div class="detail-section">
            <h4>防范措施</h4>
            <p>{{ selectedCase.prevention }}</p>
          </div>

          <div class="detail-section">
            <h4>关键词标签</h4>
            <div class="keywords">
              <el-tag
                v-for="keyword in selectedCase.keywords?.split(',')"
                :key="keyword"
                type="info"
                size="small"
              >
                {{ keyword.trim() }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Download, Search, Warning, Clock, Check, ArrowDown } from '@element-plus/icons-vue'

// 数据状态
const loading = ref(false)
const submitting = ref(false)
const dialogVisible = ref(false)
const detailDialogVisible = ref(false)
const isEdit = ref(false)
const selectAll = ref(false)
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)

// 表单引用
const caseFormRef = ref(null)

// 搜索表单
const searchForm = reactive({
  title: '',
  category: '',
  status: '',
  riskLevel: ''
})

// 统计数据
const statistics = reactive({
  total: 1248,
  pending: 38,
  approved: 1156,
  rejected: 54,
  highRisk: 142
})

// 选中的案例
const selectedCases = ref([])
const selectedCase = ref(null)

// 诈骗类型选项
const fraudTypes = [
  { value: 'telecom', label: '电信诈骗' },
  { value: 'online_shopping', label: '网络购物诈骗' },
  { value: 'investment', label: '投资理财诈骗' },
  { value: 'romance', label: '交友诈骗' },
  { value: 'job', label: '求职诈骗' },
  { value: 'fake_customer_service', label: '冒充客服诈骗' },
  { value: 'fake_official', label: '冒充官方诈骗' },
  { value: 'loan', label: '贷款诈骗' },
  { value: 'game', label: '游戏诈骗' },
  { value: 'other', label: '其他' }
]

// 案例表单
const caseForm = reactive({
  title: '',
  category: '',
  riskLevel: '',
  lossAmount: 0,
  victimAge: null,
  description: '',
  fraudMethod: '',
  prevention: '',
  keywords: '',
  isHot: false,
  isPublic: true
})

// 表单验证规则
const caseFormRules = {
  title: [
    { required: true, message: '请输入案例标题', trigger: 'blur' },
    { min: 2, max: 100, message: '标题长度为2-100个字符', trigger: 'blur' }
  ],
  category: [
    { required: true, message: '请选择诈骗类型', trigger: 'change' }
  ],
  riskLevel: [
    { required: true, message: '请选择风险等级', trigger: 'change' }
  ],
  lossAmount: [
    { required: true, message: '请输入损失金额', trigger: 'blur' },
    { type: 'number', min: 0, message: '损失金额不能为负数', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入案例描述', trigger: 'blur' },
    { min: 10, max: 2000, message: '描述长度为10-2000个字符', trigger: 'blur' }
  ],
  fraudMethod: [
    { required: true, message: '请描述诈骗手段', trigger: 'blur' }
  ],
  prevention: [
    { required: true, message: '请提供防范措施', trigger: 'blur' }
  ]
}

// 模拟案例数据
const caseList = ref([
  {
    id: 1,
    title: '冒充银行客服实施电信诈骗案',
    category: 'telecom',
    riskLevel: 'high',
    lossAmount: 50000,
    victimAge: 45,
    status: 'approved',
    isHot: true,
    isPublic: true,
    createdAt: '2024-01-15T10:30:00',
    description: '受害者接到自称银行客服的电话，以账户异常为由要求提供银行卡信息...',
    fraudMethod: '冒充银行客服，以账户异常为由骗取银行卡信息和验证码',
    prevention: '银行不会主动要求客户提供密码和验证码，如有疑问请到银行网点核实',
    keywords: '银行客服,账户异常,验证码'
  },
  {
    id: 2,
    title: '网络购物平台退款诈骗案',
    category: 'online_shopping',
    riskLevel: 'medium',
    lossAmount: 3200,
    victimAge: 28,
    status: 'pending',
    isHot: false,
    isPublic: true,
    createdAt: '2024-01-14T14:20:00',
    description: '受害者在购物平台收到退款通知，按照指示操作后被骗取资金...',
    fraudMethod: '冒充客服以商品质量问题为由，引导用户进行退款操作',
    prevention: '正规退款流程不需要额外支付费用，遇到要求转账的退款操作要提高警惕',
    keywords: '购物退款,客服,质量问题'
  }
])

// 计算属性
const filteredCases = computed(() => {
  return caseList.value.filter(item => {
    return (!searchForm.title || item.title.includes(searchForm.title)) &&
           (!searchForm.category || item.category === searchForm.category) &&
           (!searchForm.status || item.status === searchForm.status) &&
           (!searchForm.riskLevel || item.riskLevel === searchForm.riskLevel)
  })
})

// 方法
const loadCases = async () => {
  loading.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 500))
    total.value = filteredCases.value.length
  } catch (error) {
    console.error('加载案例失败:', error)
    ElMessage.error('加载案例失败')
  } finally {
    loading.value = false
  }
}

const search = () => {
  currentPage.value = 1
  loadCases()
}

const resetSearch = () => {
  Object.assign(searchForm, {
    title: '',
    category: '',
    status: '',
    riskLevel: ''
  })
  search()
}

const showAddDialog = () => {
  isEdit.value = false
  resetForm()
  dialogVisible.value = true
}

const editCase = (row) => {
  isEdit.value = true
  Object.assign(caseForm, row)
  dialogVisible.value = true
}

const viewCase = (row) => {
  selectedCase.value = row
  detailDialogVisible.value = true
}

const resetForm = () => {
  Object.assign(caseForm, {
    title: '',
    category: '',
    riskLevel: '',
    lossAmount: 0,
    victimAge: null,
    description: '',
    fraudMethod: '',
    prevention: '',
    keywords: '',
    isHot: false,
    isPublic: true
  })
}

const submitCase = async () => {
  if (!caseFormRef.value) return

  try {
    await caseFormRef.value.validate()
    submitting.value = true

    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))

    if (isEdit.value) {
      // 更新案例
      const index = caseList.value.findIndex(item => item.id === caseForm.id)
      if (index !== -1) {
        caseList.value[index] = { ...caseForm }
      }
      ElMessage.success('案例更新成功')
    } else {
      // 添加案例
      const newCase = {
        ...caseForm,
        id: Date.now(),
        status: 'pending',
        createdAt: new Date().toISOString()
      }
      caseList.value.unshift(newCase)
      ElMessage.success('案例添加成功')
    }

    dialogVisible.value = false
    loadCases()
  } catch (error) {
    console.error('提交失败:', error)
  } finally {
    submitting.value = false
  }
}

const handleCloseDialog = () => {
  dialogVisible.value = false
  resetForm()
}

const handleAction = async ({ action, row }) => {
  switch (action) {
    case 'approve':
      await approveCase(row)
      break
    case 'reject':
      await rejectCase(row)
      break
    case 'toggleHot':
      await toggleHotCase(row)
      break
    case 'delete':
      await deleteCase(row)
      break
  }
}

const approveCase = async (row) => {
  try {
    await ElMessageBox.confirm('确定要通过此案例的审核吗？', '确认操作', {
      type: 'warning'
    })
    
    row.status = 'approved'
    ElMessage.success('案例审核通过')
    loadCases()
  } catch (error) {
    // 用户取消操作
  }
}

const rejectCase = async (row) => {
  try {
    await ElMessageBox.confirm('确定要拒绝此案例的审核吗？', '确认操作', {
      type: 'warning'
    })
    
    row.status = 'rejected'
    ElMessage.success('案例审核拒绝')
    loadCases()
  } catch (error) {
    // 用户取消操作
  }
}

const toggleHotCase = async (row) => {
  row.isHot = !row.isHot
  ElMessage.success(row.isHot ? '设为热点案例' : '取消热点案例')
}

const deleteCase = async (row) => {
  try {
    await ElMessageBox.confirm('确定要删除此案例吗？此操作不可逆！', '确认删除', {
      type: 'warning'
    })
    
    const index = caseList.value.findIndex(item => item.id === row.id)
    if (index !== -1) {
      caseList.value.splice(index, 1)
    }
    ElMessage.success('案例删除成功')
    loadCases()
  } catch (error) {
    // 用户取消操作
  }
}

const handleSelectAll = (val) => {
  if (val) {
    selectedCases.value = [...caseList.value]
  } else {
    selectedCases.value = []
  }
}

const handleSelectionChange = (selection) => {
  selectedCases.value = selection
  selectAll.value = selection.length === caseList.value.length
}

const batchApprove = async () => {
  try {
    await ElMessageBox.confirm(`确定要批量通过选中的 ${selectedCases.value.length} 个案例吗？`, '确认操作', {
      type: 'warning'
    })
    
    selectedCases.value.forEach(item => {
      item.status = 'approved'
    })
    ElMessage.success('批量审核通过')
    selectedCases.value = []
    loadCases()
  } catch (error) {
    // 用户取消操作
  }
}

const batchReject = async () => {
  try {
    await ElMessageBox.confirm(`确定要批量拒绝选中的 ${selectedCases.value.length} 个案例吗？`, '确认操作', {
      type: 'warning'
    })
    
    selectedCases.value.forEach(item => {
      item.status = 'rejected'
    })
    ElMessage.success('批量审核拒绝')
    selectedCases.value = []
    loadCases()
  } catch (error) {
    // 用户取消操作
  }
}

const batchDelete = async () => {
  try {
    await ElMessageBox.confirm(`确定要批量删除选中的 ${selectedCases.value.length} 个案例吗？此操作不可逆！`, '确认删除', {
      type: 'warning'
    })
    
    selectedCases.value.forEach(item => {
      const index = caseList.value.findIndex(c => c.id === item.id)
      if (index !== -1) {
        caseList.value.splice(index, 1)
      }
    })
    ElMessage.success('批量删除成功')
    selectedCases.value = []
    loadCases()
  } catch (error) {
    // 用户取消操作
  }
}

const exportData = () => {
  ElMessage.success('数据导出功能开发中...')
}

const handlePageChange = (page) => {
  currentPage.value = page
  loadCases()
}

const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
  loadCases()
}

// 辅助函数
const getFraudTypeLabel = (value) => {
  const type = fraudTypes.find(t => t.value === value)
  return type ? type.label : value
}

const getFraudTypeColor = (value) => {
  const colors = {
    telecom: 'danger',
    online_shopping: 'warning',
    investment: 'danger',
    romance: 'info',
    job: 'success',
    fake_customer_service: 'warning',
    fake_official: 'danger',
    loan: 'warning',
    game: 'info',
    other: ''
  }
  return colors[value] || ''
}

const getRiskLevelLabel = (value) => {
  const labels = {
    high: '高危',
    medium: '中危',
    low: '低危'
  }
  return labels[value] || value
}

const getRiskLevelColor = (value) => {
  const colors = {
    high: 'danger',
    medium: 'warning',
    low: 'success'
  }
  return colors[value] || ''
}

const getStatusLabel = (value) => {
  const labels = {
    pending: '待审核',
    approved: '已通过',
    rejected: '已拒绝'
  }
  return labels[value] || value
}

const getStatusColor = (value) => {
  const colors = {
    pending: 'warning',
    approved: 'success',
    rejected: 'danger'
  }
  return colors[value] || ''
}

const formatCurrency = (amount) => {
  return new Intl.NumberFormat('zh-CN', {
    style: 'currency',
    currency: 'CNY'
  }).format(amount)
}

const formatDate = (date) => {
  return new Date(date).toLocaleString('zh-CN')
}

// 生命周期
onMounted(() => {
  loadCases()
})
</script>

<style scoped>
.fraud-case-management {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.page-header h2 {
  margin: 0;
  color: #333;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.search-filters {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 15px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 24px;
}

.stat-icon.pending {
  background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
}

.stat-icon.approved {
  background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
}

.stat-icon.high-risk {
  background: linear-gradient(135deg, #e84393 0%, #fd79a8 100%);
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.stat-label {
  color: #666;
  font-size: 14px;
}

.case-list {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.batch-actions {
  display: flex;
  gap: 10px;
}

.case-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.loss-amount {
  font-weight: bold;
  color: #e74c3c;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.case-detail {
  max-height: 600px;
  overflow-y: auto;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.detail-header h3 {
  margin: 0;
  color: #333;
  flex: 1;
}

.detail-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.detail-section {
  margin-bottom: 20px;
}

.detail-section h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 16px;
}

.detail-row {
  display: flex;
  margin-bottom: 8px;
}

.detail-row .label {
  width: 100px;
  color: #666;
  font-weight: bold;
}

.detail-row .value {
  flex: 1;
  color: #333;
}

.detail-section p {
  margin: 0;
  color: #666;
  line-height: 1.6;
}

.keywords {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 768px) {
  .fraud-case-management {
    padding: 10px;
  }
  
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .page-header {
    flex-direction: column;
    gap: 15px;
  }
  
  .header-actions {
    width: 100%;
    justify-content: center;
  }
  
  .search-filters .el-form {
    display: flex;
    flex-direction: column;
  }
  
  .search-filters .el-form-item {
    margin-bottom: 15px;
  }
}
</style> 